<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="assets/js/jquery.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="text">
		{{text}}
	</div>
	<script>
		function Vue(options){
                this.data=options.data;
                var id=options.el;
                var dom=nodeToFragment(document.getElementById(id),this);
                // dom元素编译完后返回
                document.getElementById(id).appendChild('dom')
            }
            function nodeToFragment(node,vm){
                var flag=document.createDocumentFragment();
                var child;
                while(childe=node.firstChild){
                    compile(child,vm);
                    flag.append(child);
                }
                return flag;
            }
            function compile(){
                var reg=/\{\{(.*)\}\}/;
                if(node.nodeType===1){
                    var attr=node.attributes;
                    for(var i=0;i<attr.length;i++){
                        if(attr[i].nodeName=='v-model'){
                            var name=attr[i].nodeValue;
                            node.value=vm.data[name];
                            node.removeAttribute('v-model');
                        }
                    }
                }
                if(node.nodeType===3){
                    if(reg.test(node.nodeValue)){
                        var name=RegExp.$1;
                        name=name.trim();
                        node.nodeValue=vm.data[name];
                    }
                }
            }
            var vm= new Vue({
                el:"#app",
                data:{
                    data:{
                        "0":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "1":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "2":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "3":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "4":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "5":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "6":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                        "7":{"id":"1",name:"张鹏飞","roleName":"超级管理员","tel":"13829094487","addr":"中国·深圳","loginTime":"2017-06-19"},
                    },
                    index:10,
                    start:0,
                    dataindex:{},
                },
                method:{
                    
                }
            });
	</script>
</body>

</html>